<template>
    <div>
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <span class="card-title">{{ title }}</span>
                <el-button style="float: right" size="mini" type="primary"
                    @click="() => handleSave(false)">保存</el-button>
                <el-button style="float: right; margin-right: 10px" size="mini" v-if="!this.id"
                    @click="() => handleSave(true)">保存并新增</el-button>
            </div>
            <div class="text item">
                <div>
                    <el-form :model="warehouse" :rules="rules" size="small" ref="warehouseForm" label-width="100px"
                        label-position="left">
                        <el-row :gutter="20">
                            <el-col :span="12"><el-form-item label="编号" prop="code">
                                    <el-input v-model="warehouse.code"></el-input>
                                </el-form-item></el-col>
                            <el-col :span="12"> <el-form-item label="名称" prop="name">
                                    <el-input v-model="warehouse.name"></el-input>
                                </el-form-item></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24"><el-form-item label="地址" prop="address">
                                    <el-input v-model="warehouse.address"></el-input>
                                </el-form-item></el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12"> <el-form-item label="启用仓位" parop="activateLocation">
                                    <el-checkbox v-model="warehouse.activateLocation"
                                        @change="handleActivateLocation"></el-checkbox>
                                </el-form-item></el-col>
                            <el-col :span="12"> <el-form-item label="激活" prop="activated">
                                    <el-switch v-model="warehouse.activated"> </el-switch>
                                </el-form-item></el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-divider v-show="warehouse.activateLocation"></el-divider>
                <div v-show="warehouse.activateLocation">
                    <div>仓位 </div>
                    <div><el-button type="primary" size="mini"
                            @click="() => handleLocationEdit()">新增</el-button><el-button type="danger" size="mini"
                            @click="handleLocationDelete">删除</el-button>
                    </div>
                    <div>
                        <el-table :data="warehouse.locations" style="width: 100%" @row-dblclick="handleLocationClick"
                            ref="locationTable">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="code" label="编号" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="名称">
                            </el-table-column>
                        </el-table>
                        <el-drawer direction="rtl" :append-to-body="true" :visible.sync="editLocationDrawer"
                            :with-header="false" style="overflow: auto">
                            <location-edit v-if="editLocationDrawer" :location="currentLocation"
                                @change="(location, close) => handleLocationChange(location, close)"></location-edit>
                        </el-drawer>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { getWarehouse, addWarehouse, updateWarehouse } from "@/api/warehouse";
import locationEdit from "./locationEdit.vue"
export default {
    components: {
        locationEdit
    },
    data() {
        return {
            warehouse: {
                id: "",
                code: "",
                name: "",
                address: null,
                activateLocation: false,
                activated: true,
                locations: []
            },
            rules: {
                code: [{ required: true, message: "请填写编号", trigger: "blur" }],
                name: [{ required: true, message: "请填写名称", trigger: "blur" }]
            },
            title: "",
            editLocationDrawer: false,
            currentLocation: {}
        };
    },
    methods: {
        getData() {
            if (!this.id) return;
            getWarehouse(this.id).then((res) => {
                this.warehouse = res || {};
            });
        },
        handleSave(afterAdd) {
            this.$refs.warehouseForm.validate((valid) => {
                if (valid) {
                    this.saveData(afterAdd);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        saveData(afterAdd) {
            if (!this.id) {
                addWarehouse(this.warehouse).then((res) => {
                    if (!res) return;
                    this.$notify({
                        title: "成功",
                        message: "保存成功",
                        type: "success",
                        position: "bottom-right",
                    });
                    if (afterAdd) {
                        this.warehouse = {};
                    } else {
                        this.$emit("refresh", res);
                    }
                });
            } else {
                updateWarehouse(this.warehouse).then((res) => {
                    if (!res) return;
                    this.$notify({
                        title: "成功",
                        message: "保存成功",
                        type: "success",
                        position: "bottom-right",
                    });
                    if (afterAdd) {
                        this.warehouse = {};
                    } else {
                        this.$emit("refresh", res);
                    }
                });
            }
        },
        handleLocationEdit(location) {
            this.currentLocation = location || {};
            this.editLocationDrawer = true;
        },
        handleLocationChange(location, close) {
            let match = this.warehouse.locations.find(x => x.id == location.id)

            if (!match)
                this.warehouse.locations.push(location);
            else {
                match.code = location.code;
                match.name = location.name;
            }

            this.editLocationDrawer = !close;
        },
        handleLocationClick(location) {
            this.handleLocationEdit(location)
        },
        handleLocationDelete() {
            let selectItems = this.$refs.locationTable.selection

            if (!selectItems || selectItems.length == 0)
                return;

            for (let i = 0; i < selectItems.length; i++) {
                this.warehouse.locations = this.warehouse.locations.filter(x => x.id != selectItems[i].id);
            }
        },
        handleActivateLocation(value) {
            if (value || this.warehouse.locations.length == 0) {
                return;
            }

            this.$confirm('关闭库位将清空所有库位信息,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.warehouse.locations = [];
            }).catch(() => {
                this.warehouse.activateLocation = !value;
            });
        }
    },
    mounted() {
        this.title = this.id ? "编辑" : "新增";
        this.getData();
    },
    props: {
        id: {
            type: String,
            default: "",
        },
    },
};
</script>
<style scoped></style>